<template>
  <dv-full-screen-container class="bg" style="width: 100%;height: 100%;margin: 0">
    <!-- 顶部 -->
    <top class="top"></top>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧区域 -->
      <div class="left-section">
        <Left />
      </div>

      <!-- 中间区域 -->
      <div class="center-section">
        <Center />
      </div>

      <!-- 右侧区域 -->
      <div class="right-section">
        <Right />
      </div>
    </div>

  </dv-full-screen-container>
</template>

<script>
import { ref, onMounted, reactive } from "vue";
import Top from "@/views/top/Top.vue";
import Left from "@/views/left/Left.vue";
import Center from "@/views/center/Center.vue";
import Right from "@/views/right/Right.vue";
import { useRouter } from 'vue-router';

export default {
  components: {
    Top,
    Left,
    Center,
    Right
  },
  setup() {
    const loading1 = ref(true);
    let data1 = reactive({
      list: ""
    });

    const router = useRouter();


    const handleLogout = () => {
      localStorage.removeItem('loginInfo');
      router.push('/login');
    };

    onMounted(() => {
      setInterval(() => {
        getdata();
      }, 360000);
    });

    return {data1, loading1, handleLogout};
  },
};
</script>

<style scoped>
.bg {
  width: 100%;
  height: 100%;
  padding: 16px 16px 0 16px;
  background-image: url('@/assets/img.png');
  background-size: cover;
  background-position: center center;
}

.top {
  width: 100%;
  height: 4%;
}

.main-content {
  width: 100%;
  height: 96%;
  display: flex;
  gap: 8px;
  padding-top: 16px;
}

.left-section,
.center-section,
.right-section {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.left-section {
  flex: 0 0 30%;
}

.center-section {
  flex: 0 0 40%;
}

.right-section {
  flex: 0 0 30%;
}

.logout-button {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  color: #00fcff;
  border-radius: 4px;
  cursor: pointer;
}

.logout-button:hover {
  background: rgba(255, 255, 255, 0.2);
}
</style>
